<template>
	<view class="content bg-white">
		<view class="header">
			<view class="userinfo" >				
				<view class="face">
					<image :src="userInfo.headimgurl || '../../static/img/head.png'"></image>
				</view>
				<view class="info">
					<view class="username">
						{{userInfo.user_name || '未登陆'}}
						<text class="vip" v-if="info.is_vip">vip</text>
						<view class="vip-btn" v-if="!info.is_vip && is_load_complete" @click="openBalance"> 开通会员 </view>
					</view>
					<view class="integral">
						<text>已累计消费：{{ Number(info.consume || 0).toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的资产 -->
		<view style="background-color: #ea2020;padding-bottom: 20upx;" v-if="assetsList.length">
			<view class="tui-box tui-assets-box">
				<view class="tui-order-list tui-assets-list">
					<view class="tui-order-item" v-for="(row,index) in assetsList" :key="index" hover-class="hover" @tap="toAssetsType(row)" >
						<view class="tui-assets-num"> <text>{{row.text}}</text> </view>
						<view class="tui-assets-text">{{row.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="orders" >
			<view class="box">
				<view class="label" v-for="(row,index) in orderList" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
					<view class="icon">
						<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
						<text class="iconfont" v-bind:class="row.icon"></text>
					</view>
					{{row.name}}
				</view>
			</view>
		</view>
		<!-- 列表 -->	
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="{'noborder':li_i==list.length-1}"  hover-class="hover" :key="li.name" >
				<view class="icon"><text class="iconfont" v-bind:class="li.icon"></text></view>
				<view class="text">{{li.name}}</view>
				<view class="badge" v-if="li.badge">{{li.badge}}</view>
				<view v-if="li.num" style="width:30px;text-align: center;">{{li.num}}</view>
				<text class="to iconfont">&#xe61d;</text>
			</view>
		</view>
		<!-- 登陆按钮 -->
		<view v-if="!hasLogin" style="padding: 10px 70px;text-align: center;">
			<button type="warn" @tap="bindLogin(1)" @getuserinfo="bindLogin" open-type="getUserInfo"  withCredentials="true" >登录</button>
		</view>
		
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="center">
			<view style="padding: 10px 70px;text-align: center;background: #FFFFFF;border-radius:5px;">
				<view>手机：17301909836</view>
				<view>微信：605403358  </view>
			</view>
		</uni-popup>
		
	</view>
</template>
<script>
	import { mapState,mapActions } from 'vuex'
	import config from '@/config/config'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components: { uniPopup },
		data() {
			return {
				is_load_complete:false,
				info:{
					is_vip:false,
					rights:0,
					discount:0,
					grade:0,
					point:0
				},
				assetsList:[
					{name:'可用余额',text:"0.00",url:"/pages/user/member"},
					{name:'积分税换',text:"0"},
					{name:'可享权益',text:"0"},
					{name:'已享拆扣',text:"0"},
				],
				orderList:[
					{name:'待付款',icon:'icon-icon-test1',badge:0,state:1},
					{name:'待发货',icon:'icon-daishouhuo1',badge:0,state:2},
					{name:'待收货',icon:'icon-daishouhuo3',badge:0,state:3},
					{name:'待评价',icon:'icon-pingjia',badge:0,state:4},
				],
				severList:[
					[
						{name:'收货地址',icon:'icon-dizhi',url:"/pages/address/address?source=1"},
						{name:'我的配送计划',icon:'icon-daishouhuo1',url:""},
						{name:'我的账单',icon:'icon-icon-test1',url:""},
						{name:'意见反馈',icon:'icon-pingjia',url:"/pages/user/feedback"},
						{name:'联系商家',icon:'icon-kefu',url:"/pages/msg/chat"},
					]
				]
			};
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userInfo','newMsgNum']),
		watch:{
			newMsgNum:function(newVal){
				
			}
		},
		onShow() {
			if(!this.hasLogin){ return false; }
			this.init();
		},
		onPullDownRefresh() {
			if(!this.hasLogin){ return uni.stopPullDownRefresh(); }
			this.init();
		},
		methods: {
			...mapActions(['autoModeLogin']),
			init() {
				this.$request("/app/v1/User/getInfo",{}, false ).then((res)=>{
					uni.stopPullDownRefresh();
					this.is_load_complete = true;
					this.info = res.data;
					this.assetsList[0].text = Number(this.info.balance || 0).toFixed(2);
					this.assetsList[1].text = Number(this.info.point || 0).toFixed(2);
					this.assetsList[2].text = Number(this.info.rights || 0).toFixed(0);
					this.assetsList[3].text = Number(this.info.discount || 0).toFixed(1);
					if(res.data.order){
						this.orderList.forEach((h,index)=>{
							this.orderList[index].badge = res.data.order[h.state]|| 0;
						});
					}
				}).catch(res=>{   
					uni.stopPullDownRefresh();
				});
			},
			//用户点击我的资产类型
			toAssetsType(row) {
				if(!this.hasLogin){ return false; }
				if(row.url){
					uni.navigateTo({ url:row.url });
				}else{
					this.$util.msg("功能未开放");
				}
			},
			//用户点击订单类型
			toOrderType(index) {
				if(!this.hasLogin){ return false; }
				uni.setStorageSync("showOrdersState", this.orderList[index].state || 0 );
				uni.switchTab({"url":"/pages/order/order"});
			},
			//用户点击列表项
			toPage(list_i, li_i) {
				if(!this.hasLogin){ return false; }
				let list = this.severList[list_i][li_i];
				if(list.url){
					uni.navigateTo({ url:list.url })
				}else if(list.name == '联系商家'){
					this.$refs.popup.open();
				}else{
					this.$util.msg("功能未开放");
				}
			},
			// 登录
			bindLogin(mode){
				this.autoModeLogin(mode).then(()=>{
					this.init();
				}).catch(res=>{   
					
				});
			},
			// 打开余额
			openBalance(){
				uni.navigateTo({ url: "/pages/user/member" });
			}
		}
	}
</script>

<style lang="scss">
	.icon-daishouhuo1:before {
	  content: "\e631";
	}
	.icon-dizhi:before {
	  content: "\e622";
	}
	.icon-kefu:before {
	  content: "\e6bc";
	}
	.icon-tuihuanxiu:before {
	  content: "\e6e5";
	}
	.icon-icon-test1:before {
	  content: "\e617";
	}
	.icon-youhui:before {
	  content: "\e632";
	}
	.icon-pingjia:before {
	  content: "\e615";
	}
	.icon-daishouhuo3:before {
	  content: "\e616";
	}
	.icon-shoucang:before {
	  content: "\e60e";
	}
	
	page {
		background-color: #fff
	}

	.header {
		background-color:#ea2020;
		width:92%;
		padding:40upx 4%;
		display:flex;
		align-items:center;
		
		&.status {
			padding-top: var(--status-bar-height);
		}
		.userinfo {
			width: 100%;
			display: flex;
			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx;
					.vip{
						color: #fff;
						font-size: 12px;
						background: #f77f04;
						padding: 0 5px;
						border-radius: 5px;
						font-family: monospace;
						margin-left: 5px;
					}
					.vip-btn{
						float: right;
						background:#f77f04;
						padding: 0 5px;
						border-radius: 5px;
						margin-left: 10upx;
					}
				}

				.integral {
					display: flex;
					align-items: center;
					height: 40upx;
					color: #fff;
					font-size: 24upx;
					margin-top: 8upx;
					text{
						background-color: rgba(0, 0, 0, 0.1);
						padding: 0 15upx;
						border-radius: 20upx;
						margin-right: 10upx;
					}
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%
			}
		}
	}
	
	.hover {
		opacity: 0.6;
	}
	
	.orders {
		background-color: #ea2020;
		width: 92%;
		height: 13vw;
		padding: 0 4%;
		margin-bottom: calc(4vw + 20upx);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;
		.box {
			width: 98%;
			padding: 0 1%;
			height: 17vw;
			background-color: #fefefe;
			border-radius: 24upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				color: #666666;
				font-size: 26upx;
				.badge {
					position: absolute;
					line-height: 1;
					padding: 5upx 8upx;
					background-color: #ed3f14;
					top: -1vw;
					right: -1vw;
					border-radius: 100%;
					font-size: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
				}
				.icon {
					position: relative;
					width: 7vw;
					margin: 0 1vw;
					.iconfont {
						font-size: 26px;
						line-height: 1;
					}
				}
			}
		}
	}
	
	.list {
		width: 100%;
		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: solid 1upx #e7e7e7;
			display: flex;
			align-items: center;
			position: relative;
			&.noborder {
				border-bottom: 0
			}
			.icon {
				flex-shrink: 0;
				width: 50upx;
				image {
					width: 50upx;
					height: 50upx
				}
			}
			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666
			}
			.to {
				flex-shrink: 0;
				width: 40upx;
			}
			.badge {
				line-height: 1;
				padding: 5upx 8upx;
				background-color: #ed3f14;
				top: -1vw;
				left: 30px;
				border-radius: 100%;
				font-size: 20upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	
	// 我的资产
	.tui-assets-box {
		width: 92%;
		padding:0 0 15upx 0;
		border-radius: 24upx;
		overflow: hidden;
		margin:0 auto;
		color: #fff;
		.tui-badge-dot {
			position: absolute;
			height: 12rpx;
			width: 12rpx;
			border-radius: 50%;
			right: -12rpx;
			top: 0;
			background: #F74D54;
		}
		.tui-cell-header {
			width: 100%;
			height: 74rpx;
			padding: 0 26rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
		}
		.tui-cell-title {
			font-size: 30rpx;
			line-height: 30rpx;
			font-weight: 600;
		}
		.tui-order-list {
			width: 100%;
			height: 134rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.tui-order-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.tui-assets-list {
			height: 84rpx;
		}
		.tui-assets-num {
			font-size: 32rpx;
			font-weight: 500;
			position: relative;
		}
	}
	
</style>
